<template>
	<div style="height: 900px" ref="homeBarRef"></div>
</template>

<script setup lang="ts" name="home">
	// import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from 'vue';
	// import * as echarts from 'echarts';
	// import {http} from '@/api/http';
	// import {ContentTypeEnum,RequestHttpEnum,ModuleTypeEnum} from '@/enums/httpEnum';
	// // import diskData from './车间布局测试JSON数据.json'
	// const homeBarRef = ref();


	// const state = reactive({
	// 	global: {
	// 		homeChartOne: null,
	// 		homeChartTwo: null,
	// 		homeCharThree: null,
	// 		dispose: [null, '', undefined],
	// 	} as any,
	// 	homeThree: [],
	// 	myCharts: [] as EmptyArrayType,
	// 	charts: {
	// 		theme: '',
	// 		bgColor: '',
	// 		color: '#303133',
	// 	},
	// });
	// const queryParams = ref<any>({});

	// const getLevelOption = () => {
	// 	return [
	// 		{
	// 			itemStyle: {
	// 				borderColor: '#777',
	// 				borderWidth: 0,
	// 				gapWidth: 1
	// 			},
	// 			upperLabel: {
	// 				show: false
	// 			}
	// 		},
	// 		{
	// 			itemStyle: {
	// 				borderColor: '#555',
	// 				borderWidth: 5,
	// 				gapWidth: 1
	// 			},
	// 			emphasis: {
	// 				itemStyle: {
	// 					borderColor: '#ddd'
	// 				}
	// 			}
	// 		},
	// 		{
	// 			colorSaturation: [0.35, 0.5],
	// 			itemStyle: {
	// 				borderWidth: 5,
	// 				gapWidth: 1,
	// 				borderColorSaturation: 0.6
	// 			}
	// 		}
	// 	];
	// }
	// // 获取车间布局数据
	// const getWorkshopLayout = async () =>{
	// 	var {data}=await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.PROJECT}/workshopLayout`, null);
	// 	return data;
	// }
	// // 柱状图
	// const initBarChart = async () => {
	// 	state.global.homeCharThree = markRaw(echarts.init(homeBarRef.value, state.charts.theme));
 //        var diskData= await getWorkshopLayout();
	// 	const option = {
	// 		title: {
	// 			text: '车间布局',
	// 			left: 'center'
	// 		},
	// 		tooltip: {
	// 			formatter: function (info) {
	// 				var statusName=['未生产','正常生产中','不在线','无订单生产']
	// 				var value = info.value;
	// 				var treePathInfo = info.treePathInfo;
	// 				var treePath = [];
	// 				for (var i = 1; i < treePathInfo.length; i++) {
	// 					treePath.push(treePathInfo[i].name);
	// 				}
					
	// 				return [
	// 					'<div class="tooltip-title">' +
	// 					echarts.format.encodeHTML(treePath.join('/')) +
	// 					'</div>',
	// 					'加工状态:' + (value[2]==-1?'未知': echarts.format.addCommas(statusName[value[2]]))
	// 				].join('');
	// 				// echarts.format.addCommas(value[2])
	// 			}
	// 		},
	// 		series: [
	// 			{
	// 				name: '车间布局',
	// 				type: 'treemap', //树形图类型
	// 				visibleMin: 300,
	// 				// leafDepth: 1,   //一次下钻深度
	// 				 // roam:'false',  //不能缩放平移
	// 				 top: 80,
	// 				label: {
	// 					show: true,
	// 					formatter: '{b}'
	// 				},
	// 				upperLabel: {
	// 					show: true,
	// 					height: 30
	// 				},
	// 				itemStyle: {
	// 					borderColor: '#fff'
	// 				},
	// 				// visualDimension: 1,//指定2『视觉映射』使用的是value数组的第3项
	// 				levels: getLevelOption(),
	// 				data: diskData
	// 			}
	// 		]
	// 	}

	// 	state.global.homeCharThree.setOption(option);
	// 	state.myCharts.push(state.global.homeCharThree);
	// };


	// // 批量设置 echarts resize
	// const initEchartsResizeFun = () => {
	// 	nextTick(() => {
	// 		for (let i = 0; i < state.myCharts.length; i++) {
	// 			setTimeout(() => {
	// 				state.myCharts[i].resize();
	// 			}, i * 1000);
	// 		}
	// 	});
	// };
	// // 批量设置 echarts resize
	// const initEchartsResize = () => {
	// 	window.addEventListener('resize', initEchartsResizeFun);
	// };

	// // 页面加载时
	// onMounted(() => {
	// 	initEchartsResize();
	// });

	// // 由于页面缓存原因，keep-alive
	// onActivated(() => {
	// 	// initEchartsResizeFun();
	// });

	// watch(() => {
	// 	initBarChart();
	// }
	// );
</script>